<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 下拉菜单 -->
        <!-- 
            van-dropdown-menu
                van-dropdown-item
                    v-model:双向绑定选中后的值
                    options:选项数据:[{text:"文本内容",value:"选中该项后的值"}]
            slot="title/default"
            @change发生改变时执行
         -->

        <van-dropdown-menu>
            <van-dropdown-item v-model="value" :options="options">

            </van-dropdown-item>
        </van-dropdown-menu>

    </div>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css" />


    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                data: {
                    value: "gx",
                    city: "",
                    options: [
                        { text: "广东省", value: "gd" },
                        { text: "广西省", value: "gx" }
                    ]
                }
            },
            created() {

            },
            methods: {

            },
        });
    </script>
</body>

</html>